<template>
  <div class="hello">
    <div class="box-1"></div>
    <div class="box-2"></div>
    <p>我是测试文字!!!!</p>
    <el-color-picker
      v-model="color"
      color-format="rgb"
      :show-alpha=false
      @change='themeChange'
      :predefine="predefineColors">
    </el-color-picker>
    <button @click="defaultTheme">默认主题</button>
    <button @click="dark">暗黑主题</button>
    <button @click="custom">自定义主题</button>
  </div>
</template>


<script>
import { setTheme } from "../theme/theme.js";
export default {
  name: "HelloWorld",
   data() {
      return {
        color: 'rgb('+localStorage.getItem('primaryColor')+')',
        predefineColors: [
          '#ff4500',
          '#ff8c00',
          '#ffd700',
          '#90ee90',
          '#00ced1',
          '#1e90ff',
          '#c71585',
        ]
      }
    },
  created() {
    this.init(); // 初始化主题
  },
  methods: {
    init() {
      let nowTheme = localStorage.getItem('theme')
      setTheme(nowTheme); // 初始化未默认主题
    },
    // 更改为默认主题
    defaultTheme() {
      setTheme("default");
    },
    // 更改为暗黑主题
    dark() {
      setTheme("dark");
    },
    // 更改为自定义主题
    custom() {
      let newColor = {
        r: 12,
        g: 33,
        b: 234,
      };
      let newPrimaryColor = `${newColor.r},${newColor.g},${newColor.b}`;
      localStorage.setItem("primaryColor", newPrimaryColor); // 将新的主题色存入本地
      localStorage.setItem("primaryTextColor", newPrimaryColor); // 将新的主题色存入本地
      setTheme('custom');
    },
    themeChange(){// 主题颜色变化
      let customChooseColor = this.color.slice(4,-1);
      console.log("当前颜色：",customChooseColor,localStorage.getItem('primaryColor'));
      localStorage.setItem("primaryColor", customChooseColor); // 将新的主题色存入本地
      localStorage.setItem("primaryTextColor", customChooseColor); // 将新的主题色存入本地
      setTheme('custom');
    }
  },
};
</script>
<style lang="less">
.hello {
  display: flex;
  flex-direction: column;
  align-items: center;
  .box-1 {
    width: 50px;
    height: 50px;
    margin-bottom: 30px;
    background-color: rgba(@primaryColor,1);
  }
  .box-2 {
    width: 50px;
    height: 50px;
    margin-bottom: 30px;
    background: rgba(@primaryColor,0.6);
  }
 p {
    display: block;
    color: rgba(@primaryTextColor,1);
    background: rgba(@primaryTextColor, 0.3);
  }
}
</style>
